﻿
@{
    ViewBag.Title = "采集器维修列表";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
<link rel="stylesheet" href="~/Content/css/dropload.css">
<script src="~/Content/script/swiper.min.js"></script>
<script src="~/Content/script/dropload.min.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            padding-top: 0.3rem;
            height: 2.48rem;
            box-sizing: border-box;
            margin: 0;
            /*line-height: 1.6rem;*/
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #page {
        position: absolute;
        top: 5.8rem;
        left: 0;
        right: 0;
        bottom: 55px;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

        #page .list li {
            padding: 15px 8px 15px;
            border-bottom: 1px solid #d4d4d4;
            box-sizing: border-box;
        }

            #page .list li a {
                display: block;
            }

            #page .list li div {
                display: flex;
                justify-content: space-between;
            }

                #page .list li div h3 {
                    color: #000;
                    font-size: 0.7rem;
                }

                #page .list li div h4 {
                    flex: 0 25%;
                    font-size: 0.7rem;
                    color: #3597D9;
                }

        #page .list li {
            background: #fff;
        }

            #page .list li p {
                text-align: left;
                font-size: 0.5rem;
                color: #777;
                line-height: 1rem;
            }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 8px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.65rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                top: -2px;
                margin-right: 5px;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }
</style>

<style>
    .slidepage {
        /*margin-top: 40px;*/
        height: 100%;
        overflow: auto;
    }

        .slidepage div {
            /*height: 100px;*/
        }

            .slidepage div:nth-child(2n) {
                background: #ccc;
            }

    .jiazai {
        /*display:none;*/
        opacity: 0;
    }

        .jiazai.active {
            opacity: 1;
            /*display:block;*/
        }

    .jiazaiwan {
        display: none;
        opacity: 0;
    }

        .jiazaiwan.active {
            opacity: 1;
            display: block;
        }
</style>



<div id="seacher">
    <input id="Msg" type="text" placeholder="请输入油机信息查询">
    <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
    @*&nbsp;<button id="AddMainMoin">&nbsp;添加保养</button>*@
</div>
<div id="timeRadio">
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="0" />全部
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" checked="" name="radio" value="1" id="radio1" />今日
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="7" />一周
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="30" />本月
    </label>
</div>
<div id="nav" class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide ">所有状态<br />(<span id="noExtTotal">0</span>)</li>
        <li class="swiper-slide active-nav ">待审核<br />(<span id="exingTotal">0</span>)</li>
        <li class="swiper-slide">审核通过<br />(<span id="completelyTotal">0</span>)</li>
        <li class="swiper-slide">审核不通过<br />(<span id="audiuTotal">0</span>)</li>
    </ul>
</div>
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage" id="slidepage0">
            <ul class="list" id="noEx"></ul>
            <div class="weui-loadmore jiazai" id="loadmore0">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore00">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage1">
            <ul class="list" id="exeing"></ul>
            <div class="weui-loadmore jiazai" id="loadmore1">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore11">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage2">
            <ul class="list" id="completely"></ul>
            <div class="weui-loadmore jiazai" id="loadmore2">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore22">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage3">
            <ul class="list" id="audiu"></ul>
            <div class="weui-loadmore jiazai" id="loadmore3">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore33">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
    </div>

</div>
<script>
    var GetPageUrl = '/api/Generator/GetMaintainListByPage';
    var GetDataTatolUrl = '/api/Generator/GetMaintainCount';
        var menuIndex = 0;//全局变量 工单状态索引,默认为0,方便搜索时候使用
        var radioValue = 1;//全局变量，日期时间
        var times = 1;//默认当天
 
        var tab0TopNum = 1;//sql页数查询字段（分页数据最大值）
        var tab1TopNum = 1;
        var tab2TopNum = 1;
        var tab3TopNum = 1;
        var menuIndex = 0;//页面tab选项 0：所有 1：已审核 2：已结单 3：已审核
        var paraStr = "";//搜索内容

        var isload0 = false;
        var isload1 = false;
        var isload2 = false;
        var isload3 = false; //滚动刷新锁  ajax 加载的时候设为true 加载成功设为false

        //getAlarmList1(0);
        //getAlarmList(7, '');//初始化，默认本周
        //setInterval(function () {
        //    getAlarmList(7, '');//初始化，默认本周
        //}, 30 * 60 * 1000);//30分钟实时刷新

      (function(designWidth, maxWidth) {
          var html = document.getElementsByTagName("html")[0];
          var tid;
          function refreshRem() {
            var width = html.getBoundingClientRect().width;
          //  console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
          }
          window.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
          }, false);
          refreshRem();
      })();

       //工单状态tap点击事件
      (function (doc, win) {
          var size = 10;
          var myNav = new Swiper('#nav', {
              spaceBetween: 10,
              slidesPerView: 4,
              watchSlidesProgress: true,
              watchSlidesVisibility: true,
              on: {
                  tap: function () {
                      //console.log("Top")
                      menuIndex = myNav.clickedIndex;
                      myPage.slideTo(myNav.clickedIndex);
                  }
              },



          });

          ////工单状态滑动事件
          var myPage = new Swiper('#page', {
              on: {
                  slideChangeTransitionStart: function () {
                      updateNavPosition()
                  }
              }
          });

          //工单状态滑动方法
          function updateNavPosition() {
              $('#nav .active-nav').removeClass('active-nav');
              var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
              menuIndex = activeNav.index();

              if (!activeNav.hasClass('swiper-slide-visible')) {
                  if (activeNav.index() >= myNav.activeIndex) {
                      var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                      myNav.slideTo(activeNav.index() - thumbsPerNav)
                  } else {
                      myNav.slideTo(activeNav.index())
                  }
              }
          }
          //初始化显示为审核工单
          myPage.slideTo(1);
          //console.log("2")
      })(document, window);


      //var datalist = "";
       //给页面数量赋值
      function getAlarmCount(times, paraStr) {
          //ajax参数
          var paramdata = {
              times: times,
              paraStr: paraStr
          };
          $.ajax({
              url: GetDataTatolUrl ,
              type: 'get',
              data: paramdata,
              error: function (data) {
                  console.log(JSON.stringify(data));
              },
              success: function (data) {
                  var result = eval(data.Data);
                  if (result.code == 100) {
                      return;
                  } else {
                      //给工单状态数量赋值
                      $("#noExtTotal").html(result.noExtTotal);
                      $("#exingTotal").html(result.exingTotal);
                      $("#completelyTotal").html(result.completelyTotal);
                      $("#audiuTotal").html(result.audiuTotal);
                  }
              }
          })
      }
      var dropload = []
      //radio点击事件
      $(':radio').click(function () {

     //     if (isload0 || isload1 || isload2 || isload3) {
     //         //isload0 = false; isload1 = false; isload2 = false; isload3 = false;
     //         console.log("TT")
     //         console.log(radioValue)
     //         $("input[type=radio][name=radio][value=1]").checked=true
     //         return;
     //     };

          $('.jiazai').addClass('active')
          $('.jiazaiwan').removeClass('active')
          paraStr = "";
          $("#Msg").val('');
          radioValue = $(this).val()  //获取选中的radio的值
          times = radioValue;

          $('.slidepage').eq(0).children("ul").empty();
          $('.slidepage').eq(1).children("ul").empty();
          $('.slidepage').eq(2).children("ul").empty();
          $('.slidepage').eq(3).children("ul").empty();
          tab0TopNum = 1;
          tab1TopNum = 1;
          tab2TopNum = 1;
          tab3TopNum = 1;
          getAlarmList(0);
          getAlarmList(1);
          getAlarmList(2);
          getAlarmList(3);
          getAlarmCount(times, paraStr);

      });

        //搜索
      $("#Search").click(function () {
          $('.jiazai').addClass('active')
          $('.jiazaiwan').removeClass('active')
          var Msg = $("#Msg").val().trim();
          paraStr = Msg;
          $('.slidepage').eq(0).children("ul").empty();
          $('.slidepage').eq(1).children("ul").empty();
          $('.slidepage').eq(2).children("ul").empty();
          $('.slidepage').eq(3).children("ul").empty();
          tab0TopNum = 1;
          tab1TopNum = 1;
          tab2TopNum = 1;
          tab3TopNum = 1;
          getAlarmList(0);
          getAlarmList(1);
          getAlarmList(2);
          getAlarmList(3);
          getAlarmCount(times, paraStr);
          //paraStr = "";
      })

    //添加
      $("#AddMainMoin").click(function () {
          location.href = "/GenMain/AddGenMain"
      })







    //数据分页加载函数
      function getAlarmList(menuIndex) {
          console.log("getAlarmList---" + menuIndex)
          //debugger
          switch (menuIndex) {
              case 0:// //待接单
                  if (isload0) break;
                  isload0 = true;
                  $.ajax({
                      url: GetPageUrl,
                      type: 'get',
                      data: { times: times, pagesize: 20, topNum: tab0TopNum, menuIndex: menuIndex, paraStr: paraStr },
                      success: function (data) {
                          console.log("getAlarmList-success--" + menuIndex)
                          var result = eval(data.Data);
                          var datalist = '';
                          if (result.noExtTotal != 0) {
                              result.noEx.forEach(function (d, i) {
                                  datalist += getDivHtml(d)
                                  tab0TopNum = d.Id;
                              });
                              $('#loadmore0').removeClass('active') //取消显示 加载数据div
                              $('#loadmore00').removeClass('active') //取消显示 无数据数据div
                          }// 如果没有数据
                          else {
                              $('#loadmore00').addClass('active') //显示 无数据数据div
                              $('#loadmore0').removeClass('active') //取消显示 加载数据div
                          }
                          //setTimeout(function () {
                          // 插入数据到页面，放到最后面
                          $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                          datalist = '';
                          isload0 = false;
                      },
                      error: function (data) {
                          isload0 = false;
                      }
                  })
                  break;
              case 1: //执行中
                  if (isload1) break;
                  isload1 = true;
                  $.ajax({
                      url: GetPageUrl,
                      type: 'get',
                      data: { times: times, pagesize: 20, topNum: tab1TopNum, menuIndex: menuIndex, paraStr: paraStr },
                      success: function (data) {
                          console.log("getAlarmList-success--" + menuIndex)
                          console.log(data)
                          var result = eval(data.Data);
                          var datalist = '';
                          if (result.exingTotal != 0) {
                              result.exeing.forEach(function (d, i) {
                                  datalist += getDivHtml(d)
                                  tab1TopNum = d.Id;
                              });
                              $('#loadmore1').removeClass('active') //取消显示 加载数据div
                              $('#loadmore11').removeClass('active') //取消显示 无数据数据div
                          }// 如果没有数据
                          else {
                              $('#loadmore11').addClass('active') //显示 无数据数据div
                              $('#loadmore1').removeClass('active') //取消显示 加载数据div
                          }
                          // 插入数据到页面，放到最后面
                          $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                          datalist = '';
                          isload1 = false;
                      },
                      error: function (data) {
                          isload1 = false;
                      }
                  })
                  break;
              case 2: //已结单
                  if (isload2) break;
                  isload2 = true;
                  $.ajax({
                      url: GetPageUrl,
                      type: 'get',
                      data: { times: times, pagesize: 20, topNum: tab2TopNum, menuIndex: menuIndex, paraStr: paraStr },
                      success: function (data) {
                          console.log("getAlarmList-success--" + menuIndex)
                          var result = eval(data.Data);
                          var datalist = '';
                          if (result.completelyTotal != 0) {
                              result.completely.forEach(function (d, i) {
                                  datalist += getDivHtml(d)
                                  tab2TopNum = d.Id;
                              });
                              $('#loadmore2').removeClass('active') //取消显示 加载数据div
                              $('#loadmore22').removeClass('active') //取消显示 无数据数据div
                          }// 如果没有数据
                          else {
                              $('#loadmore22').addClass('active') //显示 无数据数据div
                              $('#loadmore2').removeClass('active') //取消显示 加载数据div
                          }
                          //setTimeout(function () {
                          // 插入数据到页面，放到最后面
                          $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                          datalist = '';
                          isload2 = false;
                      },
                      error: function (data) {
                          isload2 = false;
                      }
                  })
                  break;
              case 3: //已审核
                  if(isload3) break;
                  isload3 = true;
                  $.ajax({
                      url: GetPageUrl,
                      type: 'get',
                      data: { times: times, pagesize: 20, topNum: tab3TopNum, menuIndex: menuIndex, paraStr: paraStr },
                      success: function (data) {
                          console.log("getAlarmList-success--" + menuIndex)
                          var result = eval(data.Data);
                          var datalist = '';
                          if (result.audiuTotal != 0) {
                              result.audiu.forEach(function (d, i) {
                                  datalist += getDivHtml(d)
                                  tab3TopNum = d.Id;
                              });
                              $('#loadmore3').removeClass('active') //取消显示 加载数据div
                              $('#loadmore33').removeClass('active') //取消显示 无数据数据div
                          }// 如果没有数据
                          else {
                              $('#loadmore33').addClass('active') //显示 无数据数据div
                              $('#loadmore3').removeClass('active') //取消显示 加载数据div
                          }
                          // 插入数据到页面，放到最后面
                          $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                          datalist = '';
                          isload3 = false;
                      },
                      error: function (data)
                      {
                          isload3 = false;
                      }
                  })
                  break;
          }
      }







      function Initialize() {

          //console.log(radioValue) 1
          //console.log("Initialize*--0")
          //radioValue = $('input:radio[name=sex]:checked').val();  //获取选中的radio的值
          //console.log(radioValue)
          //times = radioValue;

          $('#radio1').click();
          //console.log("11")
          //getAlarmList(0);
          //getAlarmList(1);
          //getAlarmList(2);
          //getAlarmList(3);
          //getAlarmCount(times, '');



      }
      $(document).ready(function (){
          Initialize();

      })

    //滚动刷新
      $(document).ready(function () {
          var $el = $("#slidepage0");
          var menuIndex = 0;
         // var isload0 = false;
          loadData($el, function () {
              // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
             // console.log("请求-loadtee")
              if (isload0) return false;
             // isload0 = true;
              //$('#loading').addClass('active').text('正在加载数据...');
              $('#loadmore0').addClass('active')
              getAlarmList(menuIndex);//加载数据
              //isload0 = false;

          });
      })

      $(document).ready(function () {
          // var $el = $("#slidepage0");
          var menuIndex = 1;
          var $el = $("#slidepage1");
         // var isload = false;
        //  console.log("请求")
          loadData($el, function () {
              // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
              //console.log("请求-loadtee")
              if (isload1) return false;
              //isload1 = true;
              $('#loadmore1').addClass('active')
              getAlarmList(menuIndex);
              //isload1 = false;

          });
      })

      $(document).ready(function () {
          // var $el = $("#slidepage0");
          var menuIndex = 2;
          var $el = $("#slidepage2");
         // var isload = false;
       //   console.log("请求")
          loadData($el, function () {
              // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
          //    console.log("请求-loadtee")
              if (isload2) return false;
             // isload2 = true;
              $('#loadmore2').addClass('active')
              getAlarmList(menuIndex);
             // isload2 = false;

          });
      })

      $(document).ready(function () {
          // var $el = $("#slidepage0");
          var menuIndex = 3;
          var $el = $("#slidepage3");

        //  console.log("请求")
          loadData($el, function () {
              // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
         //     console.log("请求-loadtee")
              if (isload3) return false;
             // isload3 = true;
              $('#loadmore3').addClass('active')
              getAlarmList(menuIndex);
              //isload3 = false;
          });
      })

      @*/**
   *
   * @param {Element} $el 需要滚动的高度
   * @param {Number} difference 距离底部触发callback
   * @param {Function} callback 下拉加载的回调
   */*@
      function loadData($el, callback, config) {
          config = config || {};
          config.difference = config.difference || 20;
          var timer = null;
          $el.scroll(function (e) {
            //  console.log("loadData--事件节流")
              // 事件节流
              if (timer) {
                  clearTimeout(timer)
              }
              timer = setTimeout(() => {
                  var $content = $(this)[0];
                  var scrollHeight = $content.scrollHeight;
                  var scrollTop = $content.scrollTop + $el.height();
                  if (scrollTop + config.difference > scrollHeight) {
                      callback && callback();
                  }
              }, 300);
          });
      }

    //整理显示的Div html
      function getDivHtml(d)
      {
          var CreateTime = d.CreateTime.replace('T', ' ').replace(/.\d+$/, ' ');//时间处理
          //var url = "/Maintain/Detail?dtuid='" + d.dtuid + "'" + "&GensetNum='" + d.GensetNum+"'";
          var str = "<li><a href='/Maintain/Detail?RepairCode=" + d.RepairCode + "'><div>" +
                                     "<h3>" + d.DTUID + "</h3></div>" +
                                     "<p>油机编号:" + d.GensetNum + "</p>" +
                                      "<p>单号:" + d.RepairCode + "</p>" +
                                     "<p>维修人:" + d.RepairerName + "</p>" +
                                      "<p>时间:" + CreateTime + "</p>" +
                                     "<p class='aui-text-info'>状态:" + getAnnState(d.AuditState) + "</p>" +
                                     "</a></li>"


          return str;
      }
      function getAnnState(d)
      {

          var Statestr = ""+d;
          switch (Statestr)
          {
              case "1": Statestr = "已审核"; break;
              case "2": Statestr = "审核不通过"; break;
              default : Statestr = "待审核"; break;

          }
          return Statestr
      }


</script>



